<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '10px' }">
      <!-- 卡片头部 -->
      <div slot="header">
        <el-row>
          <el-col :span="12">
            <el-button type="text" icon="el-icon-back" @click="goBack"
              >返回</el-button
            >
            <el-divider direction="vertical"></el-divider>
            试卷标题：<span class="head-font">{{ title }}</span>
            <el-divider direction="vertical"></el-divider>
            试卷总分：<span class="head-font">{{ totalScore }}</span>
            <el-divider direction="vertical"></el-divider>
            记录总数：<span class="head-font">{{ totalNum }}</span>
          </el-col>
          <!-- 下方暂时没实现 -->
          <!-- <el-col class="search" :span="12">
            <el-input
              placeholder="请输入内容"
              v-model="queryInfo"
              class="input-with-select"
            >
              <el-select
                v-model="searchSelect"
                slot="prepend"
                placeholder="请选择"
                style="width: 110px"
              >
                <el-option label="学员编号" value="id"></el-option>
                <el-option label="学员姓名" value="name"></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="queryStudentRecord"
              ></el-button>
            </el-input>
          </el-col> -->
        </el-row>
      </div>
      <!-- 卡片信息 -->
      <div style="float: left; width: 100%">
        <!-- 信息列表 -->
        <el-table
          border
          v-loading="listLoading"
          :header-cell-style="{ background: '#FAFAFA' }"
          :data="recordList"
          height="780px"
          style="width: 100%"
        >
          <el-table-column type="index" width="100"> </el-table-column>
          <el-table-column prop="eduTestRecordInfo.studentId" label="学员id">
          </el-table-column>
          <el-table-column prop="studentName" label="学员姓名">
          </el-table-column>
          <el-table-column
            prop="eduTestRecordInfo.costTime"
            label="做题耗时（分钟）"
          >
          </el-table-column>
          <el-table-column prop="eduTestRecordInfo.finalScore" label="最终得分">
          </el-table-column>
          <el-table-column prop="gmtCreate" label="记录提交时间" sortable>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  getRecordsByTestId,
  getRecordsByStudentId,
  getRecordsByStudentName,
} from "@/api/testRecord";
export default {
  //做题记录列表
  name: "TestRecord",
  data: function () {
    return {
      //表格加载遮罩
      listLoading: "false",
      //试卷编号
      testPaperId: this.$route.query.id,
      //试卷标题
      title: this.$route.query.title,
      //试卷总分
      totalScore: this.$route.query.totalScore,
      //题目总数
      totalNum: "",
      //搜索的标签
      searchSelect: "id",
      //查找框内容
      queryInfo: "",
      // queryForm: {
      //   studentId: "",
      // },
      //记录列表
      recordList: [],
    };
  },
  created: function () {
    this.queryAllRecord();
  },
  methods: {
    //根据试卷编号查找的做题记录列表
    queryAllRecord() {
      let that = this;
      this.listLoading = true;
      getRecordsByTestId(this.testPaperId).then((res) => {
        const data = res.data;
        that.totalNum = data.total;
        that.recordList = data.resList;
        this.listLoading = false;
      });
    },
    //根据学员编号查找的做题记录列表
    queryStudentRecord() {
      let that = this;
      this.listLoading = true;
      if (!this.queryInfo) {
        this.$message({
          message: "搜索内容不能为空",
          type: "warning",
        });
        return;
      }
      if (this.searchSelect == "id") {
        //按学员编号搜索
        getRecordsByStudentId(that.queryInfo).then((res) => {
          const data = res.data;
          that.totalNum = data.total;
          that.recordList = data.resList;
          that.recordList.forEach(function (item) {
            item.studentName = data.studentName;
          });
          this.listLoading = false;
        });
      } else {
        //按学员姓名搜索
        getRecordsByStudentName(that.queryInfo).then((res) => {
          const data = res.data;
          that.totalNum = data.total;
          that.recordList = data.resList;
          that.recordList.forEach(function (item) {
            item.studentName = data.studentName;
          });
          this.listLoading = false;
        });
      }
    },
    //返回
    goBack() {
      this.$router.push({
        name: "TestPaper",
      });
    },
  },
};
</script>
<style scoped>
.head-font {
  font-weight: bold;
}
.search {
  width: 30%;
}
.el-card {
  height: 100vh;
}
</style>